<template>
  <div>
    <div class="top">
      <div class="tleft">
        <span @click="$router.back()"><van-icon name="arrow-left" /></span>
        <h1>{{ detail.nm || detail?.cinemaName }}</h1>
      </div>
      <div class="tright">
        <van-popover placement="bottom-end">
          <template #reference>
            <van-button
              type="primary"
              show-arrow="false"
              style="background-color: #e54847; border: none; overflow: hidden"
              ><van-icon name="wap-nav"
            /></van-button>
          </template>
        </van-popover>
        <van-popover placement="top-end " />
      </div>
    </div>
    <div class="addr">
      <h1>{{ detail?.nm || detail?.cinemaName }}</h1>
      <p>{{ detail?.addr }}</p>
    </div>
    <div class="tuwen">
      <van-tabs v-model:active="active">
        <div
          class="dox"
          v-for="(dian, dianindex) in dianying.movies"
          :key="dianindex"
        >
          <van-tab :title="dian?.nm">
            <div
              class="bg"
              :style="{ 'background-image': `url(${dian?.img}` }"
            ></div>
            <van-image
              width="85rem"
              height="130rem"
              fit="contain"
              :src="dian?.img"
            />
            <div class="movname">
              <div class="diannm">{{ dian?.nm }}</div>
              <div class="diansc">{{ dian?.sc }}分</div>
            </div>
            <div class="leix">{{ dian?.desc }}</div>
            <div class="shijian">
              <div class="time">
                <van-swipe :width="375">
                  <van-swipe-item
                    class="today"
                    v-for="(show, shindex) in dian.shows"
                    :key="shindex"
                  >
                    <div class="date">{{ show.showDate }}</div>
                    <div class="show" v-for="(chang, chindex) in show.plist">
                      <div class="zuo">
                        <div class="tm">{{ chang.tm }}</div>

                        <div class="tp">
                          <div class="lang">
                            <p>{{ chang.lang }}</p>
                            <p>{{ chang.tp }}</p>
                          </div>
                          <div class="th">{{ chang.th }}</div>
                        </div>
                        <div class="sellp">￥{{ chang.baseSellPrice }}</div>
                        <div class="vipname" v-if="chang.vipPriceName">
                          <p class="vipprice">{{ chang.vipPriceName }}</p>
                          <p class="price">￥{{ chang.vipPrice }}</p>
                        </div>
                      </div>
                      <div
                        class="goupiao"
                        @click="
                          qumaipiao(dian, chang, detail, show),
                            $router.push({
                              path: '/ZuoWei',
                              query: {
                                id: detail.cinemaId,
                                ni: detail.cinemaName || detail.nm,
                                price: chang.baseSellPrice,
                                tm: chang.tm,
                                cinemaName: dian.nm,
                                mvid: dian.id,
                                date: show.showDate,
                                yan: chang.lang,
                                tp: chang.tp,
                                seqNo: chang.seqNo,
                                th: chang.th,
                                img: dian.img,
                              },
                            })
                        "
                      >
                        购票
                      </div>
                      <!-- dian.nm,dian.id,chang.tm,chang.baseSellPrice,detail.cinemaName||detail.nm,detail.cinemaId -->
                    </div>
                    <div class="show" v-if="show.plist.length == '0'">
                      <van-empty
                        image="https://obj.pipi.cn/festatic/fe-trade/public/img/today-no-show.3f026db3.png"
                        image-size="80"
                        description="今天的票没了"
                      />
                    </div>
                  </van-swipe-item>
                </van-swipe>
                <!-- <div
                  class="today"
                  v-for="(show, shindex) in dian.shows"
                  :key="shindex"
                >
                  <div class="date">{{ show.showDate }}</div> -->

                <!-- </div> -->
              </div>
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
    <div class="chaozhi">
      <div class="tiname">影院超值套餐</div>
      <div class="zhongbao" v-for="(bao, baoindex) in dealList" :key="baoindex">
        <div class="chihz">
          <div class="chzhzleft">
            <van-image
              width="92rem"
              height="92rem"
              fit="contain"
              :src="bao?.imageUrl"
            />
          </div>
          <div class="dingwei">
            <p>{{ bao?.cardTag }}</p>
          </div>
          <div class="chzhzright">
            <div class="zhitop">
              <div class="titleTag">{{ bao.titleTag }}</div>
              <div class="title">{{ bao.title }}</div>
            </div>
            <div class="zhixia">
              <div class="price">￥{{ bao.price }}</div>
              <div class="curNumberDesc">
                <p class="yi">{{ bao.curNumberDesc }}</p>
                <p class="qu">去购买</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "@/api/axios.js";
import { useRoute } from "vue-router";
const route = useRoute();
var moviesid = ref(`${route.query.id}`);
const active = ref(0);

const qumaipiao = (dian, chang, detail, show) => {
  // console.log(
  //   dian.nm,
  //   dian.id,
  //   chang.tm,
  //   chang.baseSellPrice,
  //   detail.cinemaName || detail.nm,
  //   detail.cinemaId,
  //   show.showDate
  // );
};

const myData = localStorage.getItem("cityId") || "default value";
// console.log(myData);
const cityName = localStorage.getItem("cityName") || "default value";
// console.log(cityName);

//影院信息
const getDetail = () =>
  axios.get(
    "https://apis.netstart.cn/maoyan/cinema/detail?cinemaId=" + moviesid.value
  );
const detail = ref([]);
async function update() {
  const { data } = await getDetail();
  detail.value = data.data;
  // console.log("影院detail", detail);
}
update();

//影院上映列表
const getDianying = () =>
  axios.get(
    `https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=${moviesid.value}&ci=1&channelId=4 `
  );
const dianying = ref([]);
async function updates() {
  const { data } = await getDianying();
  dianying.value = data.data;
  // console.log("影院dianying", dianying);
}
updates();

const getMeishi = () =>
  axios.get(`https://apis.netstart.cn/maoyan/cinema/queryDealList.json `);
const dealList = ref([]);
const divideDealList = ref([]);
async function updatef() {
  const { data } = await getMeishi();
  dealList.value = data.data.dealList;
  divideDealList.value = data.data.divideDealList;
  // console.log("影院foodlist", divideDealList);
}
updatef();
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 8vh;
  line-height: 8vh;
  font-size: 18rem;
  color: #fff;
  background-color: #e54847;
  .tleft {
    display: flex;
    width: 75vw;
    margin-right: 50rem;
    h1 {
      margin-left: 30rem;
    }
  }
  .tright {
    margin-top: 4rem;
    line-height: 8rem;
    i {
      font-size: 18rem;
    }
  }
}
:deep(.van-popover--light) {
  z-index: 2004;
  position: absolute;
  right: -80px;
  top: -7.5px;
}
.addr {
  padding: 15rem 90rem 15rem 15rem;
  h1 {
    font-size: 17rem;
    color: #333;
  }
  p {
    font-size: 13rem;
    color: #999;
    margin: 2rem 2rem;
  }
}
.tuwen {
  .dox {
    .bg {
      width: 375rem;
      height: 150rem;
      background-position: 0 20%;
      background-size: cover;
      position: relative;
      filter: blur(15px);
    }
    .van-image {
      position: absolute;
      top: 30rem;
      left: 0;
      right: 0;
      width: 100rem;
      margin: 20rem 35vw;
    }
    .movname {
      display: flex;
      margin-top: 10rem;
      justify-content: center;
      background-color: #fff;
      .diannm {
        font-size: 17rem;
        font-weight: 500;
        color: #333;
        margin: 0 5rem 0 0;
      }
      .diansc {
        color: #ffb400;
        font-size: 16rem;
      }
    }
    .leix {
      display: flex;
      justify-content: center;
      font-size: 13rem;
      color: #999;
      margin: 2rem 0 0;
    }
    .shijian {
      display: flex;
      overflow: auto;
      .time {
        display: flex;
        .today {
          width: 375rem;
          .date {
            font-size: 16rem;
            margin-top: 5rem;
            color: #666;
            &.active {
              color: #f03d37;
            }
          }
          .show {
            color: #777;
            display: flex;
            justify-content: space-between;
            font-size: 14rem;
            padding: 17rem 13rem;
            .zuo {
              width: 350rem;
              display: flex;
              .tm {
                display: flex;
                align-items: center;
                font-size: 20rem;
                color: #333;
              }
              .tp {
                width: 96rem;
                margin: 10rem 0 0 0;
                text-align: center;
                .lang {
                  color: #333;
                  margin: 2rem auto 0;
                  font-size: 13rem;
                  display: flex;
                  justify-content: center;
                }
                .th {
                  font-size: 12rem;
                  color: #999;
                }
              }
            }
            .sellp {
              display: flex;
              align-items: center;
              font-size: 19rem;
              color: #f03d37;
            }
            .vipname {
              display: flex;
              align-items: center;
              margin-left: 5rem;
              .vipprice {
                background-color: #f90;
                color: #fff;
                // padding: 2rem 1.5rem;
                border-radius: 3rem 0 0 3rem;
              }
              .price {
                color: #f90;
                line-height: 18.5rem;
                border: 1rem solid #f90;
                background-color: #fff;
              }
            }
          }
          .goupiao {
            width: 47rem;
            height: 27rem;
            margin: 25rem 0;
            padding: 3rem 2rem;
            text-align: center;
            line-height: 16rem;
            border: 1rem solid #f03d37;
            border-radius: 12rem;
          }
        }
      }
    }
  }
}
.zhongbao {
  margin-top: 10rem;
}
.chaozhi {
  padding: 0 10rem;
  .tiname {
    font-size: 15rem;
    margin: 10rem 0 5rem 0;
  }
  .zhongbao {
    .chihz {
      position: relative;
      display: flex;
      border-bottom: 1rem solid #999;
      .chzhzleft {
        padding: 5rem;
      }
    }
    .dingwei {
      position: absolute;
      top: 0;
      left: 0;
      p {
        background-color: #fa5939;
        color: #fff;
        padding: 0 5rem;
      }
    }
    .chzhzright {
      width: 240rem;
      .zhitop {
        display: flex;
        .titleTag {
          padding: 2rem 5rem;
          background-color: #f90;
          color: #fff;
        }
        .title {
          font-size: 16rem;
          margin-left: 10rem;
        }
      }
      .zhixia {
        margin-top: 40rem;
        display: flex;
        justify-content: space-between;
        .price {
          color: #e54847;
          font-size: 16rem;
        }
        .curNumberDesc {
          font-size: 14rem;
          color: #999;
          .yi {
            margin-top: -30rem;
          }
          .qu {
            color: #fff;
            padding: 3rem 5rem;
            background-color: #e54847;
          }
        }
      }
    }
  }
}
</style>
